<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index06-创建页面元素</title>
</head>
<body>
<ul id="nav">
    <li>西游记</li>
    <li>三国演义</li>
    <li id="third">红楼梦</li>
    <li>水浒传</li>
</ul>
<ol>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ol>
<input type="button" value="按钮" onclick="fun()"/>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<script type="text/javascript" src="../scripts/jquery-3.7.0.js"></script>
<script type="text/javascript">
    $(function(){
        // 创建元素使用jquery工厂函数
        // var $newDiv = $("<div>Hello</div>");
        // console.log($newDiv);
        // 创建元素
        // var $newLi = $("<li>封神榜</li>");
        // // 前置追加元素
        // // $("#nav").prepend($newLi);
        // // 将元素追加到某个父节点中
        // $newLi.prependTo("#nav");
        // var $newLi2 = $("<li>宝莲灯</li>");
        // // 后置追加
        // $("#nav").append($newLi2);
        // 后置追加到
        // $newLi2.appendTo("#nav");
        // var $newLi2 = $("<li>宝莲灯</li>");
        // $("#third").before($newLi2);
        // $("#third").after("<li>宝莲灯</li>");
        // $("p").each(function(index, element){
        //     if (index % 2 == 0) {
        //         // console.log(element);
        //         $(element).css("background", "red");
        //     }
        // });
    });

    function fun(){
        // 删除有序列表的第四个
        // $("ol > li:last").remove();
        // 清空
        $("ol > li:last").empty();
    }
</script>
</body>
</html>